Ext.define('Era.controller.MainMenu',{
    extend: 'Ext.app.Controller',
    models: ['Event'],
    stores: ['Events'],
    views: ['MainMenu'],
 
    refs: [{
        ref: 'viewport',
        selector: 'viewport'
    }],
 
    init: function() {
        this.control({
            'button[action=new_event]': {
                click: this.onShowForm
            },
            'button[action=manage_events]': {
                click: this.onShowEvents
            },
            'mainmenu': {
                render: this.setAutoHide
            }
        });
    },
    
    onShowForm: function(button) {
        
        //get the form from the viewport
        var form = this.getViewport().eventForm;
       
        //instantiate a ne event
        var record = new Era.model.Event();
             
        //bind the event to the form
        form.down('form').getForm().loadRecord(record);
        
        //show the form
        form.show();   
    },
    
    onShowEvents: function(button) {
        
        //hide the menu
        var mainmenu = button.up('mainmenu');
        mainmenu.hide();
        
        //get the viewport
        var eventbar = this.getViewport().down('eventbar');
        
        //display the grid
        var grid = this.getViewport().eventsList;
        grid.show();
        grid.alignTo(eventbar,'tr-tr',[0,34]);
        
       
    },
    
    setAutoHide: function(component) {
        component.getEl().on('mouseleave',function() {
            component.hide();
        });
    }
    
});